import { NavBar, DatePicker, Toast } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DayBill from "./components/DayBill"

const Month = () => {
  //按月做数据的分组
  const billList = useSelector(state => state.bill.billList)
  const monthGroup = useMemo(()=>{
    //return出去计算的值
    return _.groupBy(billList,(item)=> dayjs(item.date).format('YYYY-MM'))
  },[billList])
  

  const [dateVisible,setDateVisible] = useState(false)

  //控制时间显示
  const [currentDate, setCurrentDate] = useState(()=>{
    return dayjs(new Date()).format('YYYY-MM')
  })

  const [currentMonthList, setCurrentMonthList] = useState([])

  // 计算统计
  const overview = useMemo(() => {
    if (!currentMonthList) return { income: 0, pay: 0, total: 0 }
    const income = currentMonthList.filter(item => item.type === 'income')
      .reduce((a, c) => a + c.money, 0)
    const pay = currentMonthList.filter(item => item.type === 'pay')
      .reduce((a, c) => a + c.money, 0)
    return {
      income,
      pay,
      total: income + pay
    }
  }, [currentMonthList])

  //初始化的时候显示当前月的统计数据
  useEffect(()=>{
    const nowDate = dayjs("2023-03").format('YYYY-MM')
    setCurrentMonthList(monthGroup[nowDate])
  },[monthGroup])

  // 时间组件确认回调
  const dateConfirm = (date) =>{
    // Toast.show(`Till Now: ${date}`)
    const month = dayjs(date).format('YYYY-MM')
    setCurrentDate(month)
    setCurrentMonthList(monthGroup[month] || []);
  }

  // 把当前月按日分组账单数据
  const dayGroup = useMemo(() => {
    const group = _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
    return {
      dayKeys: Object.keys(group),
      group
    }
  }, [currentMonthList])

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backIcon={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">
              {currentDate + ''}月账单
            </span>
            <span className={classNames('arrow', { 'expand' : dateVisible })}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{overview.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{overview.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{(overview.total).toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            onConfirm={dateConfirm}
            onClose={()=> setDateVisible(false)}
            max={new Date()}
          />
        </div>
        {/* 单日列表统计 */}
        {dayGroup.dayKeys.map(dayKey => (
          <DayBill key={dayKey} date={dayKey} billList={dayGroup.group[dayKey]} />
        ))}
      </div>
    </div >
  )
}

export default Month